<template>
	<view class="container">
		<view class="form">
			<uni-forms ref="formRef" :model="form" :rules="rules" label-position="top">
				<uni-forms-item label="上级菜单" name="parentId">
					<xy-tree-select v-model="form.parentId" :data="menuOptions" value-name="menuId"
						label-name="menuName" children-name="children" placeholder="选择上级菜单" />
				</uni-forms-item>
				<uni-forms-item label="菜单类型" name="menuType">
					<xy-checkbox v-model="form.menuType" :data="menuTypeList" />
				</uni-forms-item>
				<uni-forms-item label="菜单图标" name="icon" v-if="form.menuType != 'F'">
					<uni-easyinput v-model="form.icon" placeholder="请输入菜单图标" />
				</uni-forms-item>
				<uni-forms-item label="显示排序" name="orderNum" required>
					<uni-easyinput v-model="form.orderNum" placeholder="请输入显示排序" />
				</uni-forms-item>
				<uni-forms-item label="菜单名称" name="menuName" required>
					<uni-easyinput v-model="form.menuName" placeholder="请输入菜单名称" />
				</uni-forms-item>
				<uni-forms-item label="路由名称" name="routeName" v-if="form.menuType == 'C'">
					<uni-easyinput v-model="form.routeName" placeholder="请输入路由名称" />
				</uni-forms-item>
				<uni-forms-item label="是否外链" name="isFrame" v-if="form.menuType != 'F'">
					<xy-checkbox v-model="form.isFrame" :data="isFrameList" />
				</uni-forms-item>
				<uni-forms-item label="路由地址" name="path" required>
					<uni-easyinput v-model="form.path" placeholder="请输入路由地址" />
				</uni-forms-item>
				<uni-forms-item label="组件路径" name="component" v-if="form.menuType == 'C'">
					<uni-easyinput v-model="form.component" placeholder="请输入组件路径" />
				</uni-forms-item>
				<uni-forms-item label="权限字符" name="perms" v-if="form.menuType == 'M'">
					<uni-easyinput v-model="form.perms" placeholder="请输入权限字符" />
				</uni-forms-item>
				<uni-forms-item label="路由参数" name="query" v-if="form.menuType == 'C'">
					<uni-easyinput v-model="form.query" placeholder="请输入路由参数" />
				</uni-forms-item>
				<uni-forms-item label="是否缓存" name="isCache" v-if="form.menuType == 'C'">
					<xy-checkbox v-model="form.isCache" :data="isCacheList" />
				</uni-forms-item>
				<uni-forms-item label="显示状态" name="visible" v-if="form.menuType == 'F'">
					<xy-checkbox v-model="form.visible" :data="sys_show_hide" />
				</uni-forms-item>
				<uni-forms-item label="菜单状态" name="status">
					<xy-checkbox v-model="form.status" :data="sys_normal_disable" placement="top" />
				</uni-forms-item>
				<uni-forms-item label="备注" name="remark">
					<uni-easyinput type="textarea" :maxlength="-1" autoHeight v-model="form.remark" placeholder="请输入备注" />
				</uni-forms-item>
				<uni-forms-item>
					<button class="mini-btn xy-btn" type="primary" size="mini" @click="submitForm()">确认</button>
					<button class="mini-btn xy-btn" type="warn" size="mini" @click="cancel()">取消</button>
				</uni-forms-item>
			</uni-forms>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app'
	import {
		addMenu,
		delMenu,
		getMenu,
		listMenu,
		updateMenu,
		treeselect as menuTreeselect
	} from "@/pages_work/api/system/menu";
	const {
		proxy
	} = getCurrentInstance();
	const {
		sys_normal_disable,
		sys_show_hide
	} = proxy.useDict("sys_normal_disable", "sys_show_hide");

	/** 表单数据 */
	const form = ref({
		menuType: 'M',
		parentId: 0
	});

	const menuOptions = ref([]);

	const menuTypeList = ref([{
		label: " 目录",
		value: "M"
	}, {
		label: "菜单",
		value: "C"
	}, {
		label: "按钮",
		value: "F"
	}]);

	const isFrameList = ref([{
		label: " 是",
		value: 0
	}, {
		label: "否",
		value: 1
	}]);

	const isCacheList = ref([{
		label: " 缓存",
		value: 0
	}, {
		label: "不缓存",
		value: 1
	}]);

	/** 表单检验规则 */
	const rules = ref(proxy.uniappRules({
		menuName: [{
			required: true,
			message: "菜单名称不能为空",
			trigger: "blur"
		}],
		orderNum: [{
			required: true,
			message: "菜单顺序不能为空",
			trigger: "blur"
		}],
		path: [{
			required: true,
			message: "路由地址不能为空",
			trigger: "blur"
		}]
	}))

	onLoad((params) => {
		uni.setNavigationBarTitle({
			title: params.title
		});
		if (params.menuId == undefined || params.menuId == null || params.menuId == '') {
			getTreeselect()
		} else {
			getTreeselect()
			handleUpdate(params);
		}
	})

	/** 取消按钮 */
	const cancel = () => {
		uni.navigateBack()
	}

	/** 提交按钮 */
	const submitForm = () => {
		proxy.$refs["formRef"].validate().then(valid => {
			if (valid) {
				if (form.value.menuId != undefined) {
					updateMenu(form.value).then(response => {
						proxy.$modal.msgSuccess("修改成功");
						setTimeout(uni.navigateBack, 1000);
					});
				} else {
					addMenu(form.value).then(response => {
						proxy.$modal.msgSuccess("新增成功");
						setTimeout(uni.navigateBack, 1000);
					});
				}
			}
		});
	};


	/** 查询菜单下拉树结构 */
	function getTreeselect() {
		menuOptions.value = [];
		listMenu().then(response => {
			const menu = {
				menuId: 0,
				menuName: "主类目",
				children: []
			};
			menu.children = proxy.handleTree(response.data, "menuId");
			menuOptions.value = [menu];
		});
	}

	/** 修改菜单 */
	const handleUpdate = (row) => {
		const id = row.menuId;
		getMenu(id).then(response => {
			form.value = response.data;
		});
	}
	
	onUnload(() => {
		uni.$emit('update')
	})
	
</script>

<style lang="scss">
	@import "@/static/scss/work/form.scss";
</style>